<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日历</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="element.css">
</head>

<body>
    <div class="div-musics">
        <audio id="audio01" src="./musics/01.mp3"></audio>
    </div>
    <div id="app">
        <div class="time-content">{{ timeContent }}</div>
        <div class="time-list">
            <el-button @click="setTimer(1)" type="primary">一分钟</el-button>
            <el-button @click="setTimer(15)" type="primary">十五分钟</el-button>
            <el-button @click="setTimer(30)" type="primary">半个小时</el-button>
            <el-button @click="setTimer(60)" type="primary">一个小时</el-button>
            <el-button @click="setTimer(120)" type="primary">两个小时</el-button>
        </div>



    </div>
    <script src="./vue.js"></script>


    <script src="./element.js"></script>

    <script>
        function secondsToTime(totalSeconds) {
            var hours = Math.floor(totalSeconds / 3600);
            var minutes = Math.floor((totalSeconds % 3600) / 60);
            var seconds = totalSeconds % 60;
            if (hours > 0) {
                return `${hours}时${minutes}分${seconds}秒`
            } else if (minutes > 0) {
                return `${minutes}分${seconds}秒`
            } else {
                return `${seconds}秒`
            }

        }
        let audio01 = document.getElementById('audio01')
        let audioPaused = function () {
            if (audio01.paused) {
                console.log('音频当前暂停');
            } else if (audio01.ended) {
                console.log('音频已经结束');
                // audio01.currentTime = 0
            } else {
                console.log('音频正在播放');
            }
            audio01.pause()
            audio01.currentTime = 0
            window.removeEventListener(
                'click',
                audioPaused,
                true,
            );
        }
        let handTime = function (fn) {
            let timer = null
            let num = 0
            return function (time) {
                if (timer) {
                    clearTimeout(timer)
                    // return
                }
                console.log('点击了', time);
                num = time * 60
                fn.call(this, num)
                timer = setInterval(() => {
                    num--
                    fn.call(this, num)

                    if (num == 0) {

                        console.log('进来了num==0');
                        clearTimeout(timer)
                        timer = null
                    }
                }, 1000)

            }
        }
        // 创建一个 Vue 实例
        var vm = new Vue({
            el: '#app',  // 绑定到 id 为 app 的 div 元素上
            data: {
                timeContent: '0s',
                num2: 0,
                message: 'Hello Vue!',  // 添加一个数据属性并赋值为 “Hello Vue!”
            },
            methods: {
                greet: function () {  // 添加一个方法
                    console.log('这是一个方法');
                },
                setTimer: handTime(function (time) {
                    if (time == 0) {
                        this.timeContent = '时间到了'
                        audio01.play()
                        window.addEventListener(
                            'click',
                            audioPaused,
                            true,
                        );

                    } else {
                        this.timeContent = secondsToTime(time)
                    }

                })
            },
            computed: {

            }
        })
    </script>
</body>

</html>